<div class="w-full h-[calc(100dvh-10.5rem)] md:h-[calc(100dvh-11.65rem)] overflow-y-auto border rounded-lg enclosing-container">
  <p class="text-lg flex items-center gap-2 px-4 pt-4 pb-2">
    OPDS Server Settings
    <i
      class="pi pi-info-circle text-sky-600"
      pTooltip="OPDS allows your book collection to be accessed by compatible reading apps through your private server."
      tooltipPosition="right"
      style="cursor: pointer;">
    </i>
  </p>
  <div class="flex flex-col space-y-6 p-4 m-4 custom-border">

    <div class="flex items-center gap-4">
      <p class="py-1">OPDS Server Enabled:</p>
      <p-toggleswitch
        [(ngModel)]="opdsEnabled"
        (onChange)="toggleOpdsServer()">
      </p-toggleswitch>
    </div>

    @if (opdsEnabled) {
      <div class="flex items-center gap-2 mt-4">
        <p class="text-lg py-1">OPDS Endpoint:</p>
        <div class="flex items-center gap-4">
          <input
            class="min-w-[600px] max-w-[600px]"
            type="text"
            pInputText
            [value]="opdsEndpoint"
            readonly/>
          <p-button
            icon="pi pi-copy"
            severity="info"
            (onClick)="copyOpdsEndpoint()"
            label="Copy"
            outlined="true">
          </p-button>
        </div>
      </div>
    }

    @if (opdsEnabled) {
      <div class="mt-6">
        <div class="flex justify-between items-center">
          <h2 class="text-lg flex items-center gap-2">
            Current OPDS Users:
          </h2>
          <p-button
            label="Create OPDS User"
            icon="pi pi-plus"
            outlined="true"
            (onClick)="openCreateUserDialog()">
          </p-button>
        </div>
        <div class="mt-3">
          <p-table [value]="users" [responsiveLayout]="'scroll'">
            <ng-template pTemplate="header">
              <tr>
                <th>Username</th>
                <th>Password</th>
                <th>Reset Password</th>
                <th>Delete</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-user>
              <tr>
                <td>{{ user.username }}</td>
                <td class="flex items-center gap-2">
                  <p-password
                    [(ngModel)]="dummyPassword"
                    [disabled]="true">
                  </p-password>
                  <i
                    class="pi pi-info-circle text-sky-600"
                    pTooltip="The password is hidden for security reasons and is only visible once during creation. You can reset the password if needed."
                    tooltipPosition="right"
                    style="cursor: pointer;">
                  </i>
                </td>
                <td>
                  <p-button
                    icon="pi pi-key"
                    severity="warn"
                    size="small"
                    outlined="true"
                    (onClick)="openResetPasswordDialog(user)">
                  </p-button>
                </td>
                <td>
                  <p-button
                    icon="pi pi-trash"
                    severity="danger"
                    size="small"
                    outlined="true"
                    (onClick)="deleteUser(user.id)">
                  </p-button>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      </div>
    }
  </div>
  <p-dialog
    header="Create New OPDS User"
    [(visible)]="createUserDialogVisible"
    [modal]="true"
    [style]="{ width: '400px' }">
    <div>
      <div>
        <label for="username">Username</label>
        <input id="username" type="text" pInputText [(ngModel)]="newUser.username" class="w-full"/>
      </div>

      <div class="mt-4">
        <div class="flex items-center gap-2">
          <label for="password">Password</label>
          <i
            class="pi pi-info-circle text-yellow-500"
            pTooltip="Password can only be seen now. It won’t be retrievable later. Please save it securely."
            tooltipPosition="right"
            style="cursor: pointer;">
          </i>
        </div>
        <input id="password" pInputText [(ngModel)]="newUser.password" class="w-full"/>
      </div>

      <div class="flex justify-end mt-6 gap-4">
        <p-button
          label="Cancel"
          icon="pi pi-times"
          severity="secondary"
          (onClick)="cancelCreateUser()">
        </p-button>
        <p-button
          label="Save"
          icon="pi pi-check"
          severity="success"
          (onClick)="saveNewUser()">
        </p-button>
      </div>
    </div>
  </p-dialog>
  <p-dialog
    header="Reset User Password"
    [(visible)]="resetPasswordDialogVisible"
    [modal]="true"
    [style]="{ width: '400px' }">
    <div>
      <p class="mb-6 mt-2">Reset password for: <b>{{ selectedUser?.username }}</b></p>
      <div>
        <div class="flex items-center">
          <label for="newPassword">New Password</label>
          <i
            class="pi pi-info-circle text-yellow-500 ml-2"
            pTooltip="Password can only be seen now. It won’t be retrievable later. Please save it securely."
            tooltipPosition="right"
            style="cursor: pointer;">
          </i>
        </div>
        <input id="newPassword" pInputText [(ngModel)]="newPassword" class="w-full"/>
      </div>

      <div class="flex justify-end mt-4 gap-4">
        <p-button
          label="Cancel"
          icon="pi pi-times"
          severity="secondary"
          (onClick)="cancelResetPassword()">
        </p-button>
        <p-button
          label="Save"
          icon="pi pi-check"
          severity="success"
          (onClick)="confirmResetPassword()">
        </p-button>
      </div>
    </div>
  </p-dialog>
</div>
